<template>
  <div class="jiankong">
    <div class="jiankong_cont">
      <!-- 筛选 -->
      <div class="jiankong_cont_search">
        <div class="dropdown">
          <el-select
            @change="selectStreet"
            placeholder="选择街办"
            v-model="street"
          >
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.label"
              v-for="item in options"
            ></el-option>
          </el-select>
        </div>
        <div class="search">
          <el-input
            placeholder="请输入点位名称"
            prefix-icon="el-icon-search"
            v-model="pointName"
          ></el-input>
          <el-button
            @click="confirm"
            type="primary"
          >确定</el-button>
        </div>
      </div>

      <!-- <monitor :pageType="2" ></monitor> -->
      <!-- 视频 -->
      <div class="monitor">
        <ul class="videoUl flex flex-wrap">
          <li
            :key="item.siteNumber"
            @click="videoListClick(item)"
            class="videoItem"
            v-for="(item, index) in videoList"
          >
            <!-- <div class="jynPlayers"></div> -->
            <div
              :id="'jynPlayer' + item.siteNumber"
              class="video jynPlayers"
            ></div>
            <p class="pointer">{{ item.name }}</p>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <div class="videopage flex flex-center">
        <!-- <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :pager-count="5"
					:current-page="pageNo" @current-change="pageChange">
        </el-pagination>-->
        <el-pagination
          :page-count="3"
          :page-size="pageSize"
          :total="total"
          @current-change="pageChange"
          @size-change="pageChange"
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <div
      class="jkfix"
      v-if="showvideo"
    >
      <div class="jkfix1">
        <p
          @click="showvideo = false"
          class="fixtitle"
        >
          <span></span>
          <span class="ft">{{ vedioinfo.name }}</span>
          <span class="fclose">X</span>
        </p>
        <div class="fixbox">
          <div
            :id="vedioinfo.id"
            class="fixboxvideo"
          ></div>
        </div>
      </div>
    </div>
    <MonitoringPopup ref="videoPopup"></MonitoringPopup>
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js' //萤石云
import monitor from '@/components/monitor/index'
import { getViDeviceList, getViDeviceStreet } from '@/api/index.js' //api
import MonitoringPopup from '@/components/monitoringPopup.vue';
let jynPlayer0 = null,
    jynPlayer1 = null,
    jynPlayer2 = null,
    jynPlayer3 = null,
    jynPlayer4 = null,
    jynPlayer5 = null;
export default {
  components: {
    monitor,
    MonitoringPopup
  },
  data() {
    return {
      imgbg: require('../../assets/images/videoimg.png'),
      pointName: '',
      options: [],
      street: '',
      pageNo: 1, //当前也
      pageSize: 6, //每页条数
      total: 0, //视频总数
      videoList: [], //监控列表
      isLastPage: false, //是否最后一页
      showvideo: false, //弹窗
      vedioinfo: {} //详情
    }
  },
  mounted() {
    this.getList()
    this.getViDeviceStreet()
  },
  beforeDestroy() {
    for (let index = 0; index < this.videoList.length; index++) {
      this.jynCreatePlayer2(index);
    }
    this.videoList = [];
  },
  methods: {
    //分页
    pageChange(e) {
      this.pageNo = e
      this.getList()
    },
    // 筛选条件
    confirm() {
      this.getList()
    },
    // 选择街办
    selectStreet(e) {
      this.getList()
    },
    // 街办列表
    getViDeviceStreet() {
      getViDeviceStreet().then(res => {
        const whole = {
          value: "全部",
          label: "全部"
        }
        const streetList = res.data.map((v, i) => {
          return {
            value: i,
            label: v
          }
        })
        this.options =[whole, ...streetList]
      })
    },
    //监控列表
    getList() {
      const streetValue = this.street === "全部" ? "" : this.street
      var data = {
        type: 2,
        state: 1,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        street: streetValue,
        name: this.pointName
      }
      getViDeviceList(data)
        .then(res => {
          if (res.code == 200) {
            this.total = res.data.totalRows
            this.$nextTick(() => {
              if (this.videoList.length > 1) {
                for (let index = 0; index < this.videoList.length; index++) {
                  this.jynCreatePlayer2(index);
                }
              }
              this.videoList = res.data.rows
              if ( res.data.rows.length > 0) {
                res.data.rows.forEach((element, index) => {
                  this.jynCreatePlayer('jynPlayer' + element.siteNumber, index, element.token, element.voiceUrl)
                })
              }
            })
          }
        })
        .catch(err => {
        })
    },
    //初始化视频
    initplayer(id, token, url) {
      let imgbg = this.imgbg
      return new EZUIKit.EZUIKitPlayer({
        id: id, // 视频容器ID
        accessToken: token,
        url: url, //视频地址
        autoplay: true, //是否自动播放
        template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // footer:
        // poster:imgbg,//极简版才可用
        audio: 0, //是否默认开启声音 1：打开（默认） 0：关闭
        width: 520,
        height: 293,
      })
    },
    //分页切换初始化视频
    jynCreatePlayer(id, i, token, url) {
      switch (i) {
        case 0:
          // this.jynPlayer0 = new EZUIPlayer(id);
          jynPlayer0 = this.initplayer(id, token, url)
          break
        case 1:
          jynPlayer1 = this.initplayer(id, token, url)
          break
        case 2:
          jynPlayer2 = this.initplayer(id, token, url)
          break
        case 3:
          jynPlayer3 = this.initplayer(id, token, url)
          break
        case 4:
          jynPlayer4 = this.initplayer(id, token, url)
          break
        case 5:
          jynPlayer5 = this.initplayer(id, token, url)
          break
        default:
          break
      }
    },
    //分页切换清除视频
    jynCreatePlayer2(i) {
      switch (i) {
        case 0:
          this.clearplayer(jynPlayer0, i)
          break
        case 1:
          this.clearplayer(jynPlayer1, i)
          break
        case 2:
          this.clearplayer(jynPlayer2, i)
          break
        case 3:
          this.clearplayer(jynPlayer3, i)
          break
        case 4:
          this.clearplayer(jynPlayer4, i)
          break
        case 5:
          this.clearplayer(jynPlayer5, i)
          break
        default:
          break
      }
      // if (jynPlayerObj[i].jynPlayer) {
      //   this.clearplayer(jynPlayerObj[i].jynPlayer, i);
      // }
    },
    //清除视频
    clearplayer(obj, i) {
      obj.stop()
      obj.hls = null
      obj.url = ''
      obj.id = null
      // obj.opt.currentSource = null;
      // obj.opt.sources = null;
      // obj.opt = null;
      // obj.video = null;
      // obj.videoId = "";
      switch (i) {
        case 0:
            jynPlayer0 = null;
          break
        case 1:
            jynPlayer1 = null;
          break
        case 2:
            jynPlayer2 = null;
          break
        case 3:
            jynPlayer3 = null;
          break
        case 4:
            jynPlayer4 = null;
          break
        case 5:
            jynPlayer5 = null;
          break
        default:
          break
      }
    },
    //点击监控弹窗
    videoListClick(item) {
      this.$refs.videoPopup.open(item)
    }
  }
}
</script>

<style lang="less">
.jiankong {
  width: 100%;
  height: 1020px;
  // background-image: url(../../assets/images/jiankong/jiankongbg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  .jiankong_cont {
    height: calc(100% - 80px);
    background-image: url(../../assets/images/jiankong/jk-bg.png);
    background-size: 98% 99%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    padding: 0 1%;
    // background: linear-gradient(to bottom, #000217, #17253c);

    .jiankong_cont_search {
      display: flex;
      justify-content: center;
      .dropdown {
        .el-input .el-input__inner {
          width: 150px;
          background: #173c90;
          border: none;
        }
      }

      .search {
        width: 430px;
        margin-left: 20px;
        background: #173c90;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        padding-left: 10px;
        .el-input .el-input__inner {
          width: 320px;
          background: none;
          border: none;
          color: white;
          caret-color: white;
        }
        .el-button {
          width: 100px;
          background: #16cefc;
        }
      }
    }

    .monitor {
      flex: 1;
      overflow: hidden;
      margin-top: 30px;
    }

    .videoUl {
      // margin-top: 15px;

      .videoItem {
        width: 31%;
        margin-top: 20px;
        margin-right: 1%;
        text-align: center;
        overflow: hidden;
        padding: 28px;
        height: 365px;
        background-image: url(../../assets/images/jiankong/jk-item-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border: none;
        -webkit-box-shadow: none;
        .video {
          width: 100%;
          height: 280px;
        }
        .jynPlayers {
          height: 280px;
        }

        p {
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #feffff;
          margin-top: 8px;
        }
      }

      .videoItem:nth-child(4n + 4) {
        // margin-right: 0;
      }
    }

    // .el-pagination button:disabled{
    //     background: none;
    //     color: #FFFFFF;
    // }
    .videopage {
      margin: 30px 0;
    }

    .el-pager li {
      background: none;
      color: #ffffff;
    }

    .el-pager li.active {
      color: #409eff !important;
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev {
      background: none;
    }
    .el-pagination__total {
      color: white;
    }
    .el-pagination__jump {
      color: white;
    }

    .el-pagination .btn-next .el-icon,
    .el-pagination .btn-prev .el-icon {
      color: #ffffff;
    }
  }

  // 弹窗
  .jkfix {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

    .jkfix1 {
      width: 60%;
      height: 70%;
      background-color: #0e3154;
      border-radius: 8px;
      display: flex;
      flex-direction: column;

      .fixtitle {
        height: 60px;
        font-size: 18px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ft,
        .fclose {
          color: #fff !important;
        }
      }

      .fixbox {
        flex: 1;
        height: 0;

        .fixboxvideo {
          height: 100%;
        }
      }
    }
  }
}
</style>